<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .addHeader {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<div id="app_a_j">
    <div class="addHeader">
        <h4 style="color: dodgerblue">添加商品</h4>
    </div>
    <div>
        商品编号：<input v-model="id">
        商品名称：<input v-model="name">
        <input type="button" value="添加" v-on:click="add">
        查询：
        <input v-model="keyWords" v-focus>
    </div>
    <div style="margin-top: 10px">
        <table border="1px">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in search(keyWords)" :key="item.id">
                <td>
                    {{item.id}}
                </td>
                <td>
                    {{item.name}}
                </td>
                <td>
                    {{item.time | timePattern('yyyy-MM-dd')}}
                </td>
                <td>
                    <a href="" @click.prevent="del(item.id)">删除</a>
                </td>
            </tr>
        </table>
    </div>
</div>

<script>
    //使用全局过滤器来修改TIME的 显示样式  (time, pattern = '') 设置一个默认的值
    Vue.filter('timePattern', function (time, pattern = '') {
        let t = new Date(time);
        let y = t.getFullYear();
        let m = t.getMonth() + 1;
        let d = t.getDate();
        if (pattern.toLowerCase() == 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`;
        } else {
            let h = t.getHours();
            let M = t.getMinutes();
            let s = t.getSeconds();
            return `${y}-${m}-${d} ${h}:${M}:${s}`;
        }
    })

    //自定义指令
    Vue.directive("focus", {
        inserted: function (el) {
            el.focus()
        }
    })


    new Vue({
        el: '#app_a_j',
        data: {
            id: '',
            name: '',
            keyWords: '',
            list: [
                {id: '1', name: '宝马', time: new Date()},
                {id: '2', name: '奔驰', time: new Date()}
            ]
        },
        methods: {
            add() {
                let item = {id: this.id, name: this.name, time: new Date()}
                this.list.push(item)
                this.keyWords = ''
            },
            del(id) {
                //some 找到索引，调用splice将其删掉
                // this.list.some((item,i)=>{
                //     if(item.id == id){
                //         this.list.splice(i,1);
                //         //在数组 some 方法中，如果 return true, 就会立即终止这个数组的后续循环
                //         return true;
                //     }
                // })

                //findIndex 先查到索引，然后再使用splice 删除
                let index = this.list.findIndex(item => {
                    if (item.id === id) {
                        return true;
                    }
                });
                this.list.splice(index, 1);
            },
            search(keyWords) {
                let newList = [];
                //使用forEach 来实现遍历
                // this.list.forEach(item => {
                //     if (item.name.indexOf(keyWords) != -1) {
                //         newList.push(item)
                //     }
                // })
                // return newList

                //使用js filter 来实现文件的筛选
                return this.list.filter(item => {
                    return item.name.indexOf(keyWords) !== -1;
                })
            }
        }
    })
</script>
</body>
</html>